<template>
  <view class="map-container">
    <!-- 地图组件 -->
    <map 
      id="map"
      class="map"
      :latitude="mapStore.center.lat"
      :longitude="mapStore.center.lng"
      :scale="mapStore.mapState.scale"
      :show-location="mapStore.showLocation"
      @regionchange="onRegionChange"
      @updated="onMapUpdated"
    ></map>
    
    <!-- 控制面板 -->
    <view class="control-panel">
      <!-- 当前坐标信息 -->
      <view class="coordinate-info">
        <text>经度: {{ mapStore.center.lng.toFixed(6) }}</text>
        <text>纬度: {{ mapStore.center.lat.toFixed(6) }}</text>
      </view>
      
      <!-- 控制按钮组 -->
      <view class="btn-group">
        <!-- 定位按钮 -->
        <button class="btn" @click="handleLocateClick">
          <text class="btn-text">{{ mapStore.isTracking ? '停止定位' : '开始定位' }}</text>
        </button>
        
        <!-- 地图缩放按钮 -->
        <view class="zoom-btn-group">
          <button class="btn zoom-btn" @click="zoomIn">+</button>
          <button class="btn zoom-btn" @click="zoomOut">-</button>
        </view>
        
        <!-- 模式切换按钮 -->
        <button class="btn" @click="toggleMode">
          <text class="btn-text">{{ mapStore.isOffline ? '离线模式' : '在线模式' }}</text>
        </button>
      </view>
    </view>
    
    <!-- 错误提示 -->
    <view class="error-toast" v-if="mapStore.locationError">
      <text>{{ mapStore.locationError.errMsg }}</text>
      <button class="btn" @click="mapStore.clearError">关闭</button>
    </view>
    
    <!-- 加载指示器 -->
    <view class="loading" v-if="loading">
      <text>地图加载中...</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useMapStore } from '../../stores/mapStore';
import { copyTilesToSandbox } from '../../utils/filesystem';

// 初始化状态
const mapStore = useMapStore();
const loading = ref(true);

// 地图区域变化事件处理
function onRegionChange(e: any) {
  if (e.type === 'end' && e.causedBy === 'drag') {
    // 用户拖动地图结束时，更新中心点
    const { latitude, longitude } = e.detail.centerLocation;
    mapStore.updateCenter({ lng: longitude, lat: latitude });
  }
}

// 地图更新事件处理
function onMapUpdated() {
  if (!mapStore.isMapLoaded) {
    mapStore.setMapLoaded(true);
    loading.value = false;
  }
}

// 定位按钮点击处理
function handleLocateClick() {
  mapStore.toggleTracking();
  
  if (mapStore.isTracking) {
    // 如果开始跟踪，则居中到当前位置
    mapStore.centerToCurrentPosition().catch(error => {
      console.error('定位失败:', error);
      uni.showToast({
        title: '定位失败，请检查GPS是否开启',
        icon: 'none'
      });
    });
  }
}

// 放大地图
function zoomIn() {
  if (mapStore.zoom < 19) {
    mapStore.updateZoom(mapStore.zoom + 1);
  }
}

// 缩小地图
function zoomOut() {
  if (mapStore.zoom > 3) {
    mapStore.updateZoom(mapStore.zoom - 1);
  }
}

// 切换在线/离线模式
function toggleMode() {
  mapStore.toggleOfflineMode();
  
  uni.showToast({
    title: `已切换至${mapStore.isOffline ? '离线' : '在线'}模式`,
    icon: 'none'
  });
}

// 初始化离线地图
async function initOfflineMap() {
  try {
    // 复制瓦片到沙盒目录
    const copied = await copyTilesToSandbox();
    if (!copied) {
      throw new Error('复制离线地图瓦片失败');
    }
    
    // 验证瓦片
    const validated = await mapStore.validateTiles();
    if (!validated) {
      console.warn('离线地图瓦片验证失败，可能不完整');
    }
    
    // 获取当前位置
    await mapStore.centerToCurrentPosition();
    
    // 自动开始跟踪
    mapStore.startTracking();
    
  } catch (error) {
    console.error('初始化离线地图失败:', error);
    uni.showToast({
      title: '初始化地图失败，请重试',
      icon: 'none'
    });
    loading.value = false;
  }
}

// 组件挂载时
onMounted(() => {
  // 初始化离线地图
  initOfflineMap();
  
  // 监听设备方向变化
  uni.onDeviceMotionChange((res) => {
    // 设备方向变化逻辑可在此实现
    console.log('设备方向变化:', res);
  });
});

// 组件卸载时
onUnmounted(() => {
  // 停止位置跟踪
  mapStore.stopTracking();
  
  // 取消监听设备方向变化
  uni.offDeviceMotionChange();
});
</script>

<style>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  bottom: 30rpx;
  left: 0;
  width: 100%;
  padding: 20rpx;
  z-index: 100;
}

.coordinate-info {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.btn {
  background-color: #007AFF;
  color: #ffffff;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  min-width: 160rpx;
  text-align: center;
}

.zoom-btn-group {
  display: flex;
  flex-direction: column;
}

.zoom-btn {
  margin: 5rpx 0;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0;
}

.error-toast {
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 59, 48, 0.9);
  color: #ffffff;
  padding: 20rpx 30rpx;
  border-radius: 10rpx;
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 102;
}
</style> 